<template>
  <div>
    <nav class="lable-wrap">
      <ul class="nav-list">
        <li class="nav-item active">
          <a href="/">我关注的</a>
        </li>
        <li class="nav-item">
          <a href="/">Android</a>
        </li>
        <li class="nav-item">
          <a href="/">前端</a>
        </li>
        <li class="nav-item">
          <a href="/">iOS</a>
        </li>
        <li class="nav-item">
          <a href="/">后端</a>
        </li>
        <li class="nav-item">
          <a href="/">设计</a>
        </li>
        <li class="nav-item">
          <a href="/">产品</a>
        </li>
        <li class="nav-item">
          <a href="/">工具资源</a>
        </li>
        <li class="nav-item">
          <a href="/">阅读</a>
        </li>
        <li class="nav-item">
          <a href="/">人工智能</a>
        </li>
        <li class="nav-item">
          <a href="/">运维</a>
        </li>
        <li class="nav-item right">
          <a href="/">标签管理</a>
        </li>
      </ul>
    </nav>
    <div class="lable-hidden"></div>
  </div>
</template>

<script>
export default {
  name: ''
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.lable-hidden
  width 100%
  height .92rem
.lable-wrap
  width 100%
  height .92rem
  box-shadow 0 .02rem 2px 0 rgba(0,0,0,.05)
  background $theme-background
  position fixed
  top 1.22rem
  z-index 99
  .nav-list
    max-width 19.2rem
    margin auto
    display flex
    height 100%
    position relative
    .nav-item
      display flex
      padding 0 .24rem
      font-size .28rem
      height 100%
      position relative
      align-items center
      color $theme-2-color
      flex-shrink 0
    .nav-item>a
      color inherit
      cursor not-allowed //功能未实现临时图标
    .nav-item>a:after
      position absolute
      content ''
      top 0
      left 0
      right 0
      bottom 0
    .nav-item.active,.nav-item:hover
      color $theme-color
    .nav-item:first-child
      padding-left 0
    .nav-item.right
      padding-right 0
      position absolute
      right 0
@media only screen and (max-width: 980px)
  .lable-wrap .nav-list
    width auto
    overflow-x auto
    .nav-item:first-child,.nav-item:last-child
      padding 0 .36rem
@media only screen and (max-width: 700px)
  .lable-wrap .nav-list .nav-item:last-child
    display none
</style>
